<template>
    <router-view></router-view>
    <div class="stage_c_footer">
        <div class="d " id="zbf_foot_btns" v-if="isShow" >
            <span   v-for="(item,index) in menuList" :key="index"    @click="handleClick(index, item.path)"  :class="{'active': isActive == index}">{{ item.name }}</span>
        </div>
        <div class="showHide"    >
            <img src="./assets/箭头左.png" alt="" srcset="" @click="showHide"> 
        </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted ,ref} from "vue";
  import { useRoute, useRouter } from "vue-router";
  const router = useRouter();
  let isActive=ref();
  const isShow = ref(true)
  let menuList=ref(
    [
      { name: "主界面", path: "/" },
      { name: "数字孪生温度场", path: "lutangwenduchang" },
        { name: "横截面温度场", path: "hjm" },
        { name: "燃烧稳定性监测", path: "ranshaowendingxing" },
        { name: "煤粉分配率", path: "meifen" },
        { name: "燃烧数字化预警", path: "yujing" },
        { name: "历史数据查询", path: "history" },
        { name: "叠加历史数据查询", path: "history0" },]
  )
  
  let handleClick=(index, path)=>{  
    isActive.value=index
      router.push(path);  //路由跳转
  }
  let showHide = () => {
    isShow.value = !isShow.value
}
  </script>
  
  <style scoped>
  /* 底部按钮 */
  .stage_c_footer {
  width: 100%;
  /* height: calc(100% - 800px); */
  /* background-color: #333; */
  /* background: rgb(0 188 255 / 10%); */
  position: fixed;
  z-index: 100;
  bottom: 0px;
  padding: 20px;
  /* right:50px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  }
  
  .stage_c_footer .d {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  }
  
  .stage_c_footer .d span {
  cursor: pointer;
  height: 57px;
  line-height: 57px;
  text-align: center;
  /* padding:  4px 20px; */
  font-size: 24px;
  width: 210px;
  /* color: #00d4ff; */
  color: #65C2C2;
  display: block;
  background: url(./assets/button.png) no-repeat center / cover;
  
  }
  
  .stage_c_footer .d>span.active {
  width: 210px;
  background: url(./assets/button_active.png) no-repeat center / cover;
  font-size: 24px;
  }
  
  .stage_c_r .d>span:hover,
  .stage_c_r .d>span.active {
  background: rgb(0 188 255 / 20%);
  background: #04192c;
  color: #00d4ff;
  }
  
  .stage_c_r .d>span:hover,
  .stage_c_r .d>span.active {
  background: rgb(0 188 255 / 20%);
  background: #04192c;
  color: #00d4ff;
  }
  </style>
  
